<template>
  <p>{{ keyword }}</p>
  <input v-model="keyword" />
</template>

<script>
// !需求：实现输入内容的防抖
// 防抖：持续触发不执行，不触发的一段时间后才执行
// 节流：持续触发也执行，只不过执行的频率变低了
import { customRef, ref } from 'vue'
const myRef = (keyword) => {
  let timer = null
  return customRef((track, trigger) => {
    return {
      get() {
        track() // 追踪这儿数据的变化
        // 获取数据的时候会触发这儿
        return keyword
      },
      set(newValue) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          // 设置数据的时候会触发这儿
          // console.log(newValue)
          keyword = newValue
          trigger() // 触发视图的更新
        }, 200)
      },
    }
  })
}
export default {
  setup() {
    // ref => 精装房，自动挡
    // myRef => 毛坯房，手动挡
    const keyword = myRef('vue')
    return {
      keyword,
    }
  },
}
</script>
